<!DOCTYPE html>
<html lang="en">

<head>
    <!-- common meta tags -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="./images/logo/faveicon.jpg" type="image/x-icon">
    <title>Portfilo - Bostami Tailwind CSS Personal Portfolio HTML Template </title>
    <link rel="stylesheet" href="./assets/fontaswesome/css/all.min.css" />
    <link rel="stylesheet" href="./assets/fontaswesome/css/fontawesome.min.css" />

    <!-- modal css -->
    <link rel="stylesheet" href="./css/vendor/jquery.modal.min.css" />
    <!-- main css -->
    <link rel="stylesheet" href="./css/tailwind.css" />
    <link rel="stylesheet" href="./css/custom.css">
    <script>
        // On page load or when changing themes, best to add inline in `head` to avoid FOUC
        if (localStorage.getItem("color-theme") === "dark" || (!("color-theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
            document.documentElement.classList.add("dark");
        } else {
            document.documentElement.classList.remove("dark");
        }
    </script>
</head>

<body>
    <!-- PRELOADER -->
    <div id="preloader">
        <div class="loader_line"></div>
    </div>
    <!-- /PRELOADER -->

    <div class="bg-homeBg dark:bg-homeTwoBg-dark min-h-screen bg-no-repeat bg-center bg-cover bg-fixed md:pb-16 w-full">
        <div class="section-bg">
            <div class="w-full flex justify-between px-4">
                <!-- website Logo -->
                <a href="/">
                    <img class="h-[26px] lg:h-[32px]" src="./images/logo/logo.png" alt="logo" />
                </a>
                <div class="flex items-center">
                    <!-- dark and light mode toggle -->
                    <button id="theme-toggle" type="button" class="dark-light-btn">
                        <i id="theme-toggle-dark-icon" class="fa-solid text-xl fa-moon hidden"></i>
                        <i id="theme-toggle-light-icon" class="fa-solid fa-sun text-xl hidden"></i>
                    </button>
                    <!-- mobile toggle button -->
                    <button id="menu-toggle" type="button" class="menu-toggle-btn">
                        <i id="menu-toggle-open-icon" class="fa-solid fa-bars text-xl "></i>
                        <i id="menu-toggle-close-icon" class="fa-solid fa-xmark text-xl hidden  "></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- mobile menu start -->
        <nav id="navbar" class="hidden lg:hidden">
            <ul
                class="block rounded-b-[20px] shadow-md absolute left-0 top-20 z-[22222222222222] w-full bg-white dark:bg-[#1d1d1d]">
                <li>
                    <a class="mobile-menu-items" href="./aboutOne.html">
                        <span class="mr-2 text-xl">
                            <i class="fa-regular fa-user"></i>
                        </span> About </a>
                </li>
                <li>
                    <a class="mobile-menu-items" href="./resumeOne.html">
                        <span class="mr-2 text-xl">
                            <i class="fa-regular fa-file-lines"></i>
                        </span> Resume </a>
                </li>
                <li>
                    <a class="mobile-menu-items-active" href="./portfiloOne.html">
                        <span class="mr-2 text-xl">
                            <i class="fas fa-briefcase"></i>
                        </span> Works </a>
                </li>
                <li>
                    <a class="mobile-menu-items" href="./blogOne.html">
                        <span class="mr-2 text-xl">
                            <i class="fa-brands fa-blogger"></i>
                        </span> Blogs </a>
                </li>
                <li>
                    <a class="mobile-menu-items" href="./contactOne.html">
                        <span class="mr-2 text-xl">
                            <i class="fa-solid fa-address-book"></i>
                        </span> Contact </a>
                </li>
            </ul>
        </nav>
        <!-- mobile menu end -->

        <div class="container grid grid-cols-12 md:gap-10 justify-between lg:mt-[220px]">
            <!-- sidber personal info -->
            <div class="col-span-12 lg:col-span-4 hidden lg:block h-screen sticky top-44">
                <div
                    class="w-full mb-6 lg:mb-0 mx-auto relative bg-white text-center dark:bg-[#111111] px-6 rounded-[20px] mt-[180px] md:mt-[220px] lg:mt-0">
                    <!-- profile image -->
                    <img src="./images/about/avatar.jpg"
                        class="w-[240px] absolute left-[50%] transform -translate-x-[50%] h-[240px] drop-shadow-xl mx-auto rounded-[20px] -mt-[140px]"
                        alt="about avatar" />
                    <div class="pt-[100px] pb-8">
                        <h1 class="mt-6 mb-1 text-[26px] font-semibold dark:text-white"> Monalisa Ashley </h1>
                        <h3
                            class="mb-4 text-[#7B7B7B] inline-block dark:bg-[#1D1D1D] px-5 py-1.5 rounded-lg dark:text-[#A6A6A6]">
                            Ui/Ux Designer </h3>
                        <div class="flex justify-center space-x-3">
                            <!-- facebook icon and link -->
                            <a href="https://www.facebook.com/" target="_blank" rel="noopener noreferrer">
                                <span class="socialbtn text-[#1773EA]">
                                    <i class="fa-brands fa-facebook-f"></i>
                                </span>
                            </a>
                            <!-- twitter icon and link -->
                            <a href="https://twitter.com/" target="_blank" rel="noopener noreferrer">
                                <span class="socialbtn text-[#1C9CEA]">
                                    <i class="fa-brands fa-twitter"></i>
                                </span>
                            </a>
                            <!-- dribbble icon and link -->
                            <a href="https://dribbble.com/" target="_blank" rel="noopener noreferrer">
                                <span class="socialbtn text-[#e14a84]">
                                    <i class="fa-brands fa-dribbble"></i>
                                </span>
                            </a>
                            <!-- linkedin icon and link -->
                            <a href="https://www.linkedin.com/" target="_blank" rel="noopener noreferrer">
                                <span class="socialbtn text-[#0072b1]">
                                    <i class="fa-brands fa-linkedin-in"></i>
                                </span>
                            </a>
                        </div>

                        <div class="p-7 rounded-2xl mt-7 bg-[#F3F6F6] dark:bg-[#1D1D1D]">
                            <div class="flex border-b border-[#E3E3E3] dark:border-[#3D3A3A] pb-2.5">
                                <span class="socialbtn bg-white dark:bg-black text-[#E93B81] shadow-md">
                                    <i class="fa-solid fa-mobile-screen-button"></i>
                                </span>
                                <div class="text-left ml-2.5">
                                    <p class="text-xs text-[#44566C] dark:text-[#A6A6A6]"> Phone </p>
                                    <p class="dark:text-white">+123 456 7890</p>
                                </div>
                            </div>
                            <div class="flex border-b border-[#E3E3E3] dark:border-[#3D3A3A] py-2.5">
                                <span class="socialbtn bg-white dark:bg-black text-[#6AB5B9] shadow-md">
                                    <i class="fa-solid fa-envelope-open-text"></i>
                                </span>
                                <div class="text-left ml-2.5">
                                    <p class="text-xs text-[#44566C] dark:text-[#A6A6A6]"> Email </p>
                                    <p class="dark:text-white">example@mail.com</p>
                                </div>
                            </div>
                            <div class="flex border-b border-[#E3E3E3] dark:border-[#3D3A3A] py-2.5">
                                <span class="socialbtn bg-white dark:bg-black text-[#FD7590] shadow-md">
                                    <i class="fa-solid fa-location-dot"></i>
                                </span>
                                <div class="text-left ml-2.5">
                                    <p class="text-xs text-[#44566C] dark:text-[#A6A6A6]"> Location </p>
                                    <p class="dark:text-white">Hong kong china</p>
                                </div>
                            </div>
                            <div class="flex py-2.5">
                                <span class="socialbtn bg-white dark:bg-black text-[#C17CEB] shadow-md">
                                    <i class="fa-solid fa-calendar-days"></i>
                                </span>
                                <div class="text-left ml-2.5">
                                    <p class="text-xs text-[#44566C] dark:text-[#A6A6A6]"> Birthday </p>
                                    <p class="dark:text-white">May 27, 1990</p>
                                </div>
                            </div>
                        </div>

                        <!-- dowanload button -->
                        <button class="dowanload-btn">
                            <img class="mr-3" src="./images/icons/dowanload.png" alt="icon" /> Download CV </button>
                    </div>
                </div>
            </div>


            <div class="col-span-12 lg:col-span-8">
                <!-- header for mobile devices start -->
                <header
                    class="lg:w-[560px] h-[144px] hidden lg:block p-[30px] ml-auto mb-10 rounded-[16px] bg-white dark:bg-[#111111]">
                    <nav class="hidden lg:block">
                        <ul class="flex">
                            <li> <a class="menu-item" href="./aboutOne.html">
                                    <span class="text-xl mb-1">
                                        <i class="fa-regular fa-user"></i>
                                    </span> About </a></li>
                            <li> <a class="menu-item" href="./resumeOne.html">
                                    <span class="text-xl mb-1">
                                        <i class="fa-regular fa-file-lines"></i>
                                    </span> Resume </a></li>
                            <li> <a class="menu-active" href="./portfiloOne.html">
                                    <span class="text-xl mb-1">
                                        <i class="fas fa-briefcase"></i>
                                    </span> Works </a></li>
                            <li><a class="menu-item" href="./blogOne.html">
                                    <span class="text-xl mb-1">
                                        <i class="fa-brands fa-blogger"></i>
                                    </span> Blogs </a></li>
                            <li> <a class="menu-item" href="./contactOne.html">
                                    <span class="text-xl mb-1">
                                        <i class="fa-solid fa-address-book"></i>
                                    </span> Contact </a></li>
                        </ul>
                    </nav>
                </header>
                <!-- header for mobile devices start -->

                <!-- about me section start -->
                <section id="portfolio" class="bg-white   lg:rounded-2xl dark:bg-[#111111]">
                    <div class="container  mb-8 px-4 sm:px-5 md:px-10 lg:px-[60px]">
                        <div class="py-12 ">
                            <h2 class="after-effect after:left-48 lg:mt-0">Portfolio</h2>
                            <!-- fillter button group -->
                            <!-- fillter group buttons -->
                            <ul
                                class="button-group isotop-menu-wrapper mt-[30px] flex w-full justify-start md:justify-end flex-wrap font-medium">
                                <li class="fillter-btn mr-4 md:mx-4 is-checked" data-filter="*">All</li>
                                <li class="fillter-btn mr-4 md:mx-4" data-filter=".dev">Video</li>
                                <li class="fillter-btn mr-4 md:mx-4" data-filter=".plugin"> Web Design</li>
                                <li class="fillter-btn mr-4 md:mx-4" data-filter=".branding"> Logo</li>
                                <li class="fillter-btn mr-4 md:mx-4" data-filter=".custom">Graphic Design</li>
                            </ul>
                        </div>
                        <!-- End py-12 -->

                        <div id="isotop-gallery-wrapper" class="mymix portfolio_list-two  two-col ">
                            <div class="grid-sizer"></div>
                            <!-- portfolio items one start -->
                            <div class="portfolio_list-two-items isotop-item plugin custom ">
                                <div
                                    class="rounded-lg bg-[#fff0f0] p-6 dark:bg-transparent dark:border-[2px] border-[#212425]">
                                    <div class="overflow-hidden rounded-lg">
                                        <a href="#portfiloOne" rel="modal:open">
                                            <img class="w-full cursor-pointer transition duration-200 ease-in-out transform hover:scale-110 rounded-lg h-auto"
                                                src="./images/work_images/small/1.jpg" alt="portfolio image" />
                                        </a>
                                    </div>
                                    <span
                                        class="pt-5 text-[14px] font-normal text-gray-lite block dark:text-[#A6A6A6]">UI/UX</span>
                                    <h2
                                        class="font-medium cursor-pointer text-xl duration-300 transition hover:text-[#FA5252] dark:hover:text-[#FA5252] dark:text-white mt-2">
                                        <a href="#portfiloOne" rel="modal:open"> Chul urina </a>
                                    </h2>
                                </div>
                            </div>

                            <!-- modal start for item one  -->
                            <div id="portfiloOne" class="modal-container modal">
                                <div
                                    class="overflow-y-scroll scroll-hide-1700  max-h-[60vh] lg:max-h-[80vh] dark:scrollbarDark scrollbarLight">
                                    <h2 class="text-[#ef4060] dark:hover:text-[#FA5252] text-4xl text-center font-bold">
                                        UI/UX Project
                                    </h2>
                                    <div class="grid grid-cols-1 lg:grid-cols-2 my-6 pr-3">
                                        <div class="space-y-2">
                                            <p class="dark:text-white flex items-center text-[15px] sm:text-lg">
                                                <i
                                                    class="fa-regular fa-file-lines sm:text-lg hidden sm:block mr-4 md:text-xl"></i>
                                                Project :&nbsp;
                                                <span class="font-medium"> Website</span>
                                            </p>
                                            <p class="dark:text-white flex items-center text-[15px] sm:text-lg">
                                                <i class="fa-solid fa-code text-lg mr-2 hidden sm:block"></i>
                                                Langages :&nbsp;
                                                <span class="font-medium">Photoshop, Figma</span>
                                            </p>
                                        </div>

                                        <div class="space-y-2">
                                            <p
                                                class="dark:text-white flex items-center mt-2 lg:mt-0 text-[15px] sm:text-lg">
                                                <i class="fa-regular fa-user text-lg mr-2 hidden sm:block"></i>
                                                Client :&nbsp; <span class="font-medium">Envato</span>
                                            </p>
                                            <p class="dark:text-white flex items-center text-[15px] sm:text-lg">
                                                <i
                                                    class="fa-solid fa-arrow-up-right-from-square text-lg mr-2 hidden sm:block"></i>
                                                Preview :&nbsp;
                                                <span
                                                    class="font-medium transition-all duration-300 ease-in-out hover:text-[#ef4060]">
                                                    <a href="https://www.envato.com" target="_blank"
                                                        rel="noopener noreferrer">www.envato.com</a>
                                                </span>
                                            </p>
                                        </div>
                                    </div>

                                    <p class="dark:text-white text-2line font-normal text-[15px] sm:text-sm">
                                        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                                        Mollitia placeat magnam possimus iusto blanditiis pariatur
                                        labore explicabo quo repellat hic dolorum numquam
                                        asperiores, voluptatum fugiat reiciendis aspernatur, non,
                                        odio aperiam voluptas ex tempora vitae. Dolor, consequatur
                                        quidem! Quas magni distinctio dolorum dolore natus, vel
                                        numquam accusamus. Nostrum eligendi recusandae qui tempore
                                        deserunt!
                                    </p>
                                    <div class="pr-3">
                                        <img class="w-full md:h-[450px] h-auto object-cover rounded-xl mt-6"
                                            src="./images/work_images/1.jpg" alt="portfolio image" />
                                    </div>
                                </div>
                                <a href="#close-modal" rel="modal:close"
                                    class="close bg-close-light dark:bg-close-dark">Close</a>
                            </div>

                            <!-- portfolio items two start -->
                            <div class="portfolio_list-two-items isotop-item dev branding ">
                                <div
                                    class="rounded-lg bg-[#fff3fc] dark:bg-transparent p-6 dark:border-[2px] border-[#212425]">
                                    <div class="overflow-hidden rounded-lg">
                                        <a href="#portfiloTwo" rel="modal:open">
                                            <img class="w-full cursor-pointer transition duration-200 ease-in-out transform hover:scale-110 rounded-lg h-auto"
                                                src="./images/work_images/small/2.jpg" alt="portfolio image" />
                                        </a>
                                    </div>
                                    <span
                                        class="pt-5 text-[14px] font-normal text-gray-lite block dark:text-[#A6A6A6]">Logo</span>
                                    <h2
                                        class="font-medium cursor-pointer text-xl duration-300 transition hover:text-[#FA5252] dark:hover:text-[#FA5252] dark:text-white mt-2">
                                        <a href="#portfiloTwo" rel="modal:open">Chul urina</a>
                                    </h2>
                                </div>
                            </div>

                            <!-- modal start for item two  -->
                            <div id="portfiloTwo" class="modal-container modal">
                                <div
                                    class="overflow-y-scroll scroll-hide-1700  max-h-[60vh] lg:max-h-[80vh] dark:scrollbarDark scrollbarLight">
                                    <h2 class="text-[#ef4060] dark:hover:text-[#FA5252] text-4xl text-center font-bold">
                                        Logo Project
                                    </h2>
                                    <div class="grid grid-cols-1 lg:grid-cols-2 my-6 pr-3">
                                        <div class="space-y-2">
                                            <p class="dark:text-white flex items-center text-[15px] sm:text-lg">
                                                <i
                                                    class="fa-regular fa-file-lines sm:text-lg hidden sm:block mr-4 md:text-xl"></i>
                                                Project :&nbsp;
                                                <span class="font-medium"> Website</span>
                                            </p>
                                            <p class="dark:text-white flex items-center text-[15px] sm:text-lg">
                                                <i class="fa-solid fa-code text-lg mr-2 hidden sm:block"></i>
                                                Langages :&nbsp;
                                                <span class="font-medium">Photoshop, Figma</span>
                                            </p>
                                        </div>
                                        <div class="space-y-2">
                                            <p
                                                class="dark:text-white flex items-center mt-2 lg:mt-0 text-[15px] sm:text-lg">
                                                <i class="fa-regular fa-user text-lg mr-2 hidden sm:block"></i>
                                                Client :&nbsp; <span class="font-medium">Envato</span>
                                            </p>
                                            <p class="dark:text-white flex items-center text-[15px] sm:text-lg">
                                                <i
                                                    class="fa-solid fa-arrow-up-right-from-square text-lg mr-2 hidden sm:block"></i>
                                                Preview :&nbsp;
                                                <span
                                                    class="font-medium transition-all duration-300 ease-in-out hover:text-[#ef4060]">
                                                    <a href="https://www.envato.com" target="_blank"
                                                        rel="noopener noreferrer">www.envato.com</a>
                                                </span>
                                            </p>
                                        </div>
                                    </div>

                                    <p class="dark:text-white text-2line font-normal text-[15px] sm:text-sm">
                                        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                                        Mollitia placeat magnam possimus iusto blanditiis pariatur
                                        labore explicabo quo repellat hic dolorum numquam
                                        asperiores, voluptatum fugiat reiciendis aspernatur, non,
                                        odio aperiam voluptas ex tempora vitae. Dolor, consequatur
                                        quidem! Quas magni distinctio dolorum dolore natus, vel
                                        numquam accusamus. Nostrum eligendi recusandae qui tempore
                                        deserunt!
                                    </p>
                                    <div class="pr-3">
                                        <img class="w-full md:h-[450px] h-auto object-cover rounded-xl mt-6"
                                            src="./images/work_images/2.jpg" alt="portfolio image" />
                                    </div>
                                </div>
                                <a href="#close-modal" rel="modal:close"
                                    class="close bg-close-light dark:bg-close-dark">Close</a>
                            </div>

                            <!-- portfolio items three start -->
                            <div class="portfolio_list-two-items isotop-item plugin ">
                                <div
                                    class="rounded-lg bg-[#fff3fc] dark:bg-transparent p-6 dark:border-[2px] border-[#212425]">
                                    <div class="overflow-hidden rounded-lg">
                                        <a href="#portfiloThree" rel="modal:open">
                                            <img class="w-full cursor-pointer transition duration-200 ease-in-out transform hover:scale-110 rounded-lg h-auto"
                                                src="./images/work_images/small/3.jpg" alt="portfolio image" />
                                        </a>
                                    </div>
                                    <span
                                        class="pt-5 text-[14px] font-normal text-gray-lite block dark:text-[#A6A6A6]">UI/UX</span>
                                    <h2
                                        class="font-medium cursor-pointer text-xl duration-300 transition hover:text-[#FA5252] dark:hover:text-[#FA5252] dark:text-white mt-2">
                                        <a href="#portfiloThree" rel="modal:open">
                                            T-Shirt Design
                                        </a>
                                    </h2>
                                </div>
                            </div>

                            <!-- modal start for item three start -->
                            <div id="portfiloThree" class="modal-container modal">
                                <div
                                    class="overflow-y-scroll scroll-hide-1700  max-h-[60vh] lg:max-h-[80vh] dark:scrollbarDark scrollbarLight">
                                    <h2 class="text-[#ef4060] dark:hover:text-[#FA5252] text-4xl text-center font-bold">
                                        T-Shirt Design Project
                                    </h2>
                                    <div class="grid grid-cols-1 lg:grid-cols-2 my-6 pr-3">
                                        <div class="space-y-2">
                                            <p class="dark:text-white flex items-center text-[15px] sm:text-lg">
                                                <i
                                                    class="fa-regular fa-file-lines sm:text-lg hidden sm:block mr-4 md:text-xl"></i>
                                                Project :&nbsp;
                                                <span class="font-medium"> Website</span>
                                            </p>
                                            <p class="dark:text-white flex items-center text-[15px] sm:text-lg">
                                                <i class="fa-solid fa-code text-lg mr-2 hidden sm:block"></i>
                                                Langages :&nbsp;
                                                <span class="font-medium">Photoshop, Figma</span>
                                            </p>
                                        </div>
                                        <div class="space-y-2">
                                            <p
                                                class="dark:text-white flex items-center mt-2 lg:mt-0 text-[15px] sm:text-lg">
                                                <i class="fa-regular fa-user text-lg mr-2 hidden sm:block"></i>
                                                Client :&nbsp; <span class="font-medium">Envato</span>
                                            </p>
                                            <p class="dark:text-white flex items-center text-[15px] sm:text-lg">
                                                <i
                                                    class="fa-solid fa-arrow-up-right-from-square text-lg mr-2 hidden sm:block"></i>
                                                Preview :&nbsp;
                                                <span
                                                    class="font-medium transition-all duration-300 ease-in-out hover:text-[#ef4060]">
                                                    <a href="https://www.envato.com" target="_blank"
                                                        rel="noopener noreferrer">www.envato.com</a>
                                                </span>
                                            </p>
                                        </div>
                                    </div>

                                    <p class="dark:text-white text-2line font-normal text-[15px] sm:text-sm">
                                        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                                        Mollitia placeat magnam possimus iusto blanditiis pariatur
                                        labore explicabo quo repellat hic dolorum numquam
                                        asperiores, voluptatum fugiat reiciendis aspernatur, non,
                                        odio aperiam voluptas ex tempora vitae. Dolor, consequatur
                                        quidem! Quas magni distinctio dolorum dolore natus, vel
                                        numquam accusamus. Nostrum eligendi recusandae qui tempore
                                        deserunt!
                                    </p>
                                    <div class="pr-3">
                                        <img class="w-full md:h-[450px] h-auto object-cover rounded-xl mt-6"
                                            src="./images/work_images/3.jpg" alt="portfolio image" />
                                    </div>
                                </div>
                                <a href="#close-modal" rel="modal:close"
                                    class="close bg-close-light dark:bg-close-dark">Close</a>
                            </div>

                            <!-- portfolio items four start -->
                            <div class="portfolio_list-two-items isotop-item dev custom ">
                                <div
                                    class="rounded-lg p-6 bg-[#e9faff] dark:bg-transparent dark:border-[2px] border-[#212425]">
                                    <div class="overflow-hidden rounded-lg">
                                        <a href="#portfiloFour" rel="modal:open">
                                            <img class="w-full cursor-pointer transition duration-200 ease-in-out transform hover:scale-110 rounded-lg h-auto"
                                                src="./images/work_images/small/4.jpg" alt="portfolio image" />
                                        </a>
                                    </div>
                                    <span
                                        class="pt-5 text-[14px] font-normal text-gray-lite block dark:text-[#A6A6A6]">UI/UX</span>
                                    <h2
                                        class="font-medium cursor-pointer text-xl duration-300 transition hover:text-[#FA5252] dark:hover:text-[#FA5252] dark:text-white mt-2">
                                        <a href="#portfiloFour" rel="modal:open">Packaging Box
                                        </a>
                                    </h2>
                                </div>
                            </div>

                            <!-- modal start for item one start -->
                            <div id="portfiloFour" class="modal-container modal">
                                <div
                                    class="overflow-y-scroll scroll-hide-1700  max-h-[60vh] lg:max-h-[80vh] dark:scrollbarDark scrollbarLight">
                                    <h2 class="text-[#ef4060] dark:hover:text-[#FA5252] text-4xl text-center font-bold">
                                        Packaging Box Project
                                    </h2>
                                    <div class="grid grid-cols-1 lg:grid-cols-2 my-6 pr-3">
                                        <div class="space-y-2">
                                            <p class="dark:text-white flex items-center text-[15px] sm:text-lg">
                                                <i
                                                    class="fa-regular fa-file-lines sm:text-lg hidden sm:block mr-4 md:text-xl"></i>
                                                Project :&nbsp;
                                                <span class="font-medium"> Website</span>
                                            </p>
                                            <p class="dark:text-white flex items-center text-[15px] sm:text-lg">
                                                <i class="fa-solid fa-code text-lg mr-2 hidden sm:block"></i>
                                                Langages :&nbsp;
                                                <span class="font-medium">Photoshop, Figma</span>
                                            </p>
                                        </div>

                                        <div class="space-y-2">
                                            <p
                                                class="dark:text-white flex items-center mt-2 lg:mt-0 text-[15px] sm:text-lg">
                                                <i class="fa-regular fa-user text-lg mr-2 hidden sm:block"></i>
                                                Client :&nbsp; <span class="font-medium">Envato</span>
                                            </p>
                                            <p class="dark:text-white flex items-center text-[15px] sm:text-lg">
                                                <i
                                                    class="fa-solid fa-arrow-up-right-from-square text-lg mr-2 hidden sm:block"></i>
                                                Preview :&nbsp;
                                                <span
                                                    class="font-medium transition-all duration-300 ease-in-out hover:text-[#ef4060]">
                                                    <a href="https://www.envato.com" target="_blank"
                                                        rel="noopener noreferrer">www.envato.com</a>
                                                </span>
                                            </p>
                                        </div>
                                    </div>

                                    <p class="dark:text-white text-2line font-normal text-[15px] sm:text-sm">
                                        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                                        Mollitia placeat magnam possimus iusto blanditiis pariatur
                                        labore explicabo quo repellat hic dolorum numquam
                                        asperiores, voluptatum fugiat reiciendis aspernatur, non,
                                        odio aperiam voluptas ex tempora vitae. Dolor, consequatur
                                        quidem! Quas magni distinctio dolorum dolore natus, vel
                                        numquam accusamus. Nostrum eligendi recusandae qui tempore
                                        deserunt!
                                    </p>
                                    <div class="pr-3">
                                        <img class="w-full md:h-[450px] h-auto object-cover rounded-xl mt-6"
                                            src="./images/work_images/4.jpg" alt="portfolio image" />
                                    </div>
                                </div>
                                <a href="#close-modal" rel="modal:close"
                                    class="close bg-close-light dark:bg-close-dark">Close</a>
                            </div>

                            <!-- modal start for item five start -->
                            <div class="portfolio_list-two-items isotop-item branding ">
                                <div
                                    class="rounded-lg bg-[#fffae9] dark:bg-transparent p-6 dark:border-[2px] border-[#212425]">
                                    <div class="overflow-hidden rounded-lg">
                                        <a href="#portfiloFive" rel="modal:open">
                                            <img class="w-full cursor-pointer transition duration-200 ease-in-out transform hover:scale-110 rounded-lg h-auto"
                                                src="./images/work_images/small/5.jpg" alt="portfolio image" />
                                        </a>
                                    </div>
                                    <span
                                        class="pt-5 text-[14px] font-normal text-gray-lite block dark:text-[#A6A6A6]">Web
                                        Design</span>
                                    <h2
                                        class="font-medium cursor-pointer text-xl duration-300 transition hover:text-[#FA5252] dark:hover:text-[#FA5252] dark:text-white mt-2">
                                        <a href="#portfiloFive" rel="modal:open"> Aura Dione</a>
                                    </h2>
                                </div>
                            </div>

                            <!-- modal start for item five start -->
                            <div id="portfiloFive" class="modal-container modal">
                                <div
                                    class="overflow-y-scroll scroll-hide-1700  max-h-[60vh] lg:max-h-[80vh] dark:scrollbarDark scrollbarLight">
                                    <h2 class="text-[#ef4060] dark:hover:text-[#FA5252] text-4xl text-center font-bold">
                                        Aura Dione Project
                                    </h2>
                                    <div class="grid grid-cols-1 lg:grid-cols-2 my-6 pr-3">
                                        <div class="space-y-2">
                                            <p class="dark:text-white flex items-center text-[15px] sm:text-lg">
                                                <i
                                                    class="fa-regular fa-file-lines sm:text-lg hidden sm:block mr-4 md:text-xl"></i>
                                                Project :&nbsp;
                                                <span class="font-medium"> Website</span>
                                            </p>
                                            <p class="dark:text-white flex items-center text-[15px] sm:text-lg">
                                                <i class="fa-solid fa-code text-lg mr-2 hidden sm:block"></i>
                                                Langages :&nbsp;
                                                <span class="font-medium">Photoshop, Figma</span>
                                            </p>
                                        </div>
                                        <div class="space-y-2">
                                            <p
                                                class="dark:text-white flex items-center mt-2 lg:mt-0 text-[15px] sm:text-lg">
                                                <i class="fa-regular fa-user text-lg mr-2 hidden sm:block"></i>
                                                Client :&nbsp; <span class="font-medium">Envato</span>
                                            </p>
                                            <p class="dark:text-white flex items-center text-[15px] sm:text-lg">
                                                <i
                                                    class="fa-solid fa-arrow-up-right-from-square text-lg mr-2 hidden sm:block"></i>
                                                Preview :&nbsp;
                                                <span
                                                    class="font-medium transition-all duration-300 ease-in-out hover:text-[#ef4060]">
                                                    <a href="https://www.envato.com" target="_blank"
                                                        rel="noopener noreferrer">www.envato.com</a>
                                                </span>
                                            </p>
                                        </div>
                                    </div>

                                    <p class="dark:text-white text-2line font-normal text-[15px] sm:text-sm">
                                        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                                        Mollitia placeat magnam possimus iusto blanditiis pariatur
                                        labore explicabo quo repellat hic dolorum numquam
                                        asperiores, voluptatum fugiat reiciendis aspernatur, non,
                                        odio aperiam voluptas ex tempora vitae. Dolor, consequatur
                                        quidem! Quas magni distinctio dolorum dolore natus, vel
                                        numquam accusamus. Nostrum eligendi recusandae qui tempore
                                        deserunt!
                                    </p>
                                    <div class="pr-3">
                                        <img class="w-full md:h-[450px] h-auto object-cover rounded-xl mt-6"
                                            src="./images/work_images/5.jpg" alt="portfolio image" />
                                    </div>
                                </div>
                                <a href="#close-modal" rel="modal:close"
                                    class="close bg-close-light dark:bg-close-dark">Close</a>
                            </div>

                            <!-- portfolio items Six start -->
                            <div class="portfolio_list-two-items isotop-item branding ">
                                <div
                                    class="rounded-lg bg-[#f4f4ff] dark:bg-transparent p-6 dark:border-[2px] border-[#212425]">
                                    <div class="overflow-hidden rounded-lg">
                                        <a href="#portfiloSix" rel="modal:open">
                                            <img class="w-full cursor-pointer transition duration-200 ease-in-out transform hover:scale-110 rounded-lg h-auto"
                                                src="./images/work_images/small/6.jpg" alt="portfolio image" />
                                        </a>
                                    </div>
                                    <span
                                        class="pt-5 text-[14px] font-normal text-gray-lite block dark:text-[#A6A6A6]">Video</span>
                                    <h2
                                        class="font-medium cursor-pointer text-xl duration-300 transition hover:text-[#FA5252] dark:hover:text-[#FA5252] dark:text-white mt-2">
                                        <a href="#portfiloSix" rel="modal:open">
                                            Modern Bag Design
                                        </a>
                                    </h2>
                                </div>
                            </div>

                            <!-- modal start for item six start -->
                            <div id="portfiloSix" class="modal-container modal">
                                <div
                                    class="overflow-y-scroll scroll-hide-1700  max-h-[60vh] lg:max-h-[80vh] dark:scrollbarDark scrollbarLight">
                                    <h2 class="text-[#ef4060] dark:hover:text-[#FA5252] text-4xl text-center font-bold">
                                        Modern Bag Design Project
                                    </h2>
                                    <div class="grid grid-cols-1 lg:grid-cols-2 my-6 pr-3">
                                        <div class="space-y-2">
                                            <p class="dark:text-white flex items-center text-[15px] sm:text-lg">
                                                <i
                                                    class="fa-regular fa-file-lines sm:text-lg hidden sm:block mr-4 md:text-xl"></i>
                                                Project :&nbsp;
                                                <span class="font-medium"> Website</span>
                                            </p>

                                            <p class="dark:text-white flex items-center text-[15px] sm:text-lg">
                                                <i class="fa-solid fa-code text-lg mr-2 hidden sm:block"></i>
                                                Langages :&nbsp;
                                                <span class="font-medium">Photoshop, Figma</span>
                                            </p>

                                        </div>

                                        <div class="space-y-2">
                                            <p
                                                class="dark:text-white flex items-center mt-2 lg:mt-0 text-[15px] sm:text-lg">
                                                <i class="fa-regular fa-user text-lg mr-2 hidden sm:block"></i>
                                                Client :&nbsp; <span class="font-medium">Envato</span>
                                            </p>
                                            <p class="dark:text-white flex items-center text-[15px] sm:text-lg">
                                                <i
                                                    class="fa-solid fa-arrow-up-right-from-square text-lg mr-2 hidden sm:block"></i>
                                                Preview :&nbsp;
                                                <span
                                                    class="font-medium transition-all duration-300 ease-in-out hover:text-[#ef4060]">
                                                    <a href="https://www.envato.com" target="_blank"
                                                        rel="noopener noreferrer">www.envato.com</a>
                                                </span>
                                            </p>
                                        </div>
                                    </div>

                                    <p class="dark:text-white text-2line font-normal text-[15px] sm:text-sm">
                                        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                                        Mollitia placeat magnam possimus iusto blanditiis pariatur
                                        labore explicabo quo repellat hic dolorum numquam
                                        asperiores, voluptatum fugiat reiciendis aspernatur, non,
                                        odio aperiam voluptas ex tempora vitae. Dolor, consequatur
                                        quidem! Quas magni distinctio dolorum dolore natus, vel
                                        numquam accusamus. Nostrum eligendi recusandae qui tempore
                                        deserunt!
                                    </p>
                                    <div class="pr-3">
                                        <img class="w-full md:h-[450px] h-auto object-cover rounded-xl mt-6"
                                            src="./images/work_images/6.jpg" alt="portfolio image" />
                                    </div>
                                </div>
                                <a href="#close-modal" rel="modal:close"
                                    class="close bg-close-light dark:bg-close-dark">Close</a>
                            </div>

                            <!-- modal start for item Seven start -->
                            <div class="portfolio_list-two-items isotop-item plugin ">
                                <div
                                    class="rounded-lg bg-[#f4f4ff] dark:bg-transparent p-6 dark:border-[2px] border-[#212425]">
                                    <div class="overflow-hidden rounded-lg">
                                        <a href="#portfiloSeven" rel="modal:open">
                                            <img class="w-full cursor-pointer transition duration-200 ease-in-out transform hover:scale-110 rounded-lg h-auto"
                                                src="./images/work_images/small/7.jpg" alt="portfolio image" />
                                        </a>
                                    </div>
                                    <span
                                        class="pt-5 text-[14px] font-normal text-gray-lite block dark:text-[#A6A6A6]">Video</span>
                                    <h2
                                        class="font-medium cursor-pointer text-xl duration-300 transition hover:text-[#FA5252] dark:hover:text-[#FA5252] dark:text-white mt-2">
                                        <a href="#portfiloSeven" rel="modal:open"> Chul urina </a>
                                    </h2>
                                </div>
                            </div>

                            <!-- modal start for item Seven start -->
                            <div id="portfiloSeven" class="modal-container modal">
                                <div
                                    class="overflow-y-scroll scroll-hide-1700  max-h-[60vh] lg:max-h-[80vh] dark:scrollbarDark scrollbarLight">
                                    <h2 class="text-[#ef4060] dark:hover:text-[#FA5252] text-4xl text-center font-bold">
                                        UI/UX Project
                                    </h2>
                                    <div class="grid grid-cols-1 lg:grid-cols-2 my-6 pr-3">
                                        <div class="space-y-2">
                                            <p class="dark:text-white flex items-center text-[15px] sm:text-lg">
                                                <i
                                                    class="fa-regular fa-file-lines sm:text-lg hidden sm:block mr-4 md:text-xl"></i>
                                                Project :&nbsp;
                                                <span class="font-medium"> Website</span>
                                            </p>
                                            <p class="dark:text-white flex items-center text-[15px] sm:text-lg">
                                                <i class="fa-solid fa-code text-lg mr-2 hidden sm:block"></i>
                                                Langages :&nbsp;
                                                <span class="font-medium">Photoshop, Figma</span>
                                            </p>
                                        </div>
                                        <div class="space-y-2">
                                            <p
                                                class="dark:text-white flex items-center mt-2 lg:mt-0 text-[15px] sm:text-lg">
                                                <i class="fa-regular fa-user text-lg mr-2 hidden sm:block"></i>
                                                Client :&nbsp; <span class="font-medium">Envato</span>
                                            </p>
                                            <p class="dark:text-white flex items-center text-[15px] sm:text-lg">
                                                <i
                                                    class="fa-solid fa-arrow-up-right-from-square text-lg mr-2 hidden sm:block"></i>
                                                Preview :&nbsp;
                                                <span
                                                    class="font-medium transition-all duration-300 ease-in-out hover:text-[#ef4060]">
                                                    <a href="https://www.envato.com" target="_blank"
                                                        rel="noopener noreferrer">www.envato.com</a>
                                                </span>
                                            </p>
                                        </div>
                                    </div>

                                    <p class="dark:text-white text-2line font-normal text-[15px] sm:text-sm">
                                        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                                        Mollitia placeat magnam possimus iusto blanditiis pariatur
                                        labore explicabo quo repellat hic dolorum numquam
                                        asperiores, voluptatum fugiat reiciendis aspernatur, non,
                                        odio aperiam voluptas ex tempora vitae. Dolor, consequatur
                                        quidem! Quas magni distinctio dolorum dolore natus, vel
                                        numquam accusamus. Nostrum eligendi recusandae qui tempore
                                        deserunt!
                                    </p>
                                    <div class="pr-3">
                                        <img class="w-full md:h-[450px] h-auto object-cover rounded-xl mt-6"
                                            src="./images/work_images/7.jpg" alt="portfolio image" />
                                    </div>
                                </div>
                                <a href="#close-modal" rel="modal:close"
                                    class="close bg-close-light dark:bg-close-dark">Close</a>
                            </div>

                            <!-- portfolio items Eight start -->
                            <div class="portfolio_list-two-items isotop-item dev branding ">
                                <div
                                    class="rounded-lg bg-[#f4f4ff] dark:bg-transparent p-6 dark:border-[2px] border-[#212425]">
                                    <div class="overflow-hidden rounded-lg">
                                        <a href="#portfiloEight" rel="modal:open">
                                            <img class="w-full cursor-pointer transition duration-200 ease-in-out transform hover:scale-110 rounded-lg h-auto"
                                                src="./images/work_images/small/8.jpg" alt="portfolio image" />
                                        </a>
                                    </div>
                                    <span
                                        class="pt-5 text-[14px] font-normal text-gray-lite block dark:text-[#A6A6A6]">Video</span>
                                    <h2
                                        class="font-medium cursor-pointer text-xl duration-300 transition hover:text-[#FA5252] dark:hover:text-[#FA5252] dark:text-white mt-2">
                                        <a href="#portfiloEight" rel="modal:open"> Chul urina </a>
                                    </h2>
                                </div>
                            </div>

                            <!-- modal start for item Eight start -->
                            <div id="portfiloEight" class="modal-container modal">
                                <div
                                    class="overflow-y-scroll scroll-hide-1700  max-h-[60vh] lg:max-h-[80vh] dark:scrollbarDark scrollbarLight">
                                    <h2 class="text-[#ef4060] dark:hover:text-[#FA5252] text-4xl text-center font-bold">
                                        UI/UX Project
                                    </h2>
                                    <div class="grid grid-cols-1 lg:grid-cols-2 my-6 pr-3">
                                        <div class="space-y-2">
                                            <p class="dark:text-white flex items-center text-[15px] sm:text-lg">
                                                <i
                                                    class="fa-regular fa-file-lines sm:text-lg hidden sm:block mr-4 md:text-xl"></i>
                                                Project :&nbsp;
                                                <span class="font-medium"> Website</span>
                                            </p>
                                            <p class="dark:text-white flex items-center text-[15px] sm:text-lg">
                                                <i class="fa-solid fa-code text-lg mr-2 hidden sm:block"></i>
                                                Langages :&nbsp;
                                                <span class="font-medium">Photoshop, Figma</span>
                                            </p>
                                        </div>
                                        <div class="space-y-2">
                                            <p
                                                class="dark:text-white flex items-center mt-2 lg:mt-0 text-[15px] sm:text-lg">
                                                <i class="fa-regular fa-user text-lg mr-2 hidden sm:block"></i>
                                                Client :&nbsp; <span class="font-medium">Envato</span>
                                            </p>
                                            <p class="dark:text-white flex items-center text-[15px] sm:text-lg">
                                                <i
                                                    class="fa-solid fa-arrow-up-right-from-square text-lg mr-2 hidden sm:block"></i>
                                                Preview :&nbsp;
                                                <span
                                                    class="font-medium transition-all duration-300 ease-in-out hover:text-[#ef4060]">
                                                    <a href="https://www.envato.com" target="_blank"
                                                        rel="noopener noreferrer">www.envato.com</a>
                                                </span>
                                            </p>
                                        </div>
                                    </div>

                                    <p class="dark:text-white text-2line font-normal text-[15px] sm:text-sm">
                                        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                                        Mollitia placeat magnam possimus iusto blanditiis pariatur
                                        labore explicabo quo repellat hic dolorum numquam
                                        asperiores, voluptatum fugiat reiciendis aspernatur, non,
                                        odio aperiam voluptas ex tempora vitae. Dolor, consequatur
                                        quidem! Quas magni distinctio dolorum dolore natus, vel
                                        numquam accusamus. Nostrum eligendi recusandae qui tempore
                                        deserunt!
                                    </p>
                                    <div class="pr-3">
                                        <img class="w-full md:h-[450px] h-auto object-cover rounded-xl mt-6"
                                            src="./images/work_images/8.jpg" alt="portfolio image" />
                                    </div>
                                </div>
                                <a href="#close-modal" rel="modal:close"
                                    class="close bg-close-light dark:bg-close-dark">Close</a>
                            </div>


                            <!-- portfolio items Nine start -->
                            <div class="portfolio_list-two-items isotop-item plugin custom ">
                                <div
                                    class="rounded-lg bg-[#fff0f8] dark:bg-transparent p-6 dark:border-[2px] border-[#212425]">
                                    <div class="overflow-hidden rounded-lg">
                                        <a href="#portfiloNine" rel="modal:open">
                                            <img class="w-full cursor-pointer transition duration-200 ease-in-out transform hover:scale-110 rounded-lg h-auto"
                                                src="./images/work_images/small/9.jpg" alt="portfolio image" />
                                        </a>
                                    </div>
                                    <span
                                        class="pt-5 text-[14px] font-normal text-gray-lite block dark:text-[#A6A6A6]">Web
                                        Design</span>
                                    <h2
                                        class="font-medium cursor-pointer text-xl duration-300 transition hover:text-[#FA5252] dark:hover:text-[#FA5252] dark:text-white mt-2">
                                        <a href="#portfiloNine" rel="modal:open"> Aura Dione </a>
                                    </h2>
                                </div>
                            </div>

                            <!-- modal start for item Nine start -->
                            <div id="portfiloNine" class="modal-container modal">
                                <div
                                    class="overflow-y-scroll scroll-hide-1700  max-h-[60vh] lg:max-h-[80vh] dark:scrollbarDark scrollbarLight">
                                    <h2 class="text-[#ef4060] dark:hover:text-[#FA5252] text-4xl text-center font-bold">
                                        Aura Dione Project
                                    </h2>
                                    <div class="grid grid-cols-1 lg:grid-cols-2 my-6 pr-3">
                                        <div class="space-y-2">
                                            <p class="dark:text-white flex items-center text-[15px] sm:text-lg">
                                                <i
                                                    class="fa-regular fa-file-lines sm:text-lg hidden sm:block mr-4 md:text-xl"></i>
                                                Project :&nbsp;
                                                <span class="font-medium"> Website</span>
                                            </p>
                                            <p class="dark:text-white flex items-center text-[15px] sm:text-lg">
                                                <i class="fa-solid fa-code text-lg mr-2 hidden sm:block"></i>
                                                Langages :&nbsp;
                                                <span class="font-medium">Photoshop, Figma</span>
                                            </p>
                                        </div>

                                        <div class="space-y-2">
                                            <p
                                                class="dark:text-white flex items-center mt-2 lg:mt-0 text-[15px] sm:text-lg">
                                                <i class="fa-regular fa-user text-lg mr-2 hidden sm:block"></i>
                                                Client :&nbsp; <span class="font-medium">Envato</span>
                                            </p>
                                            <p class="dark:text-white flex items-center text-[15px] sm:text-lg">
                                                <i
                                                    class="fa-solid fa-arrow-up-right-from-square text-lg mr-2 hidden sm:block"></i>
                                                Preview :&nbsp;
                                                <span
                                                    class="font-medium transition-all duration-300 ease-in-out hover:text-[#ef4060]">
                                                    <a href="https://www.envato.com" target="_blank"
                                                        rel="noopener noreferrer">www.envato.com</a>
                                                </span>
                                            </p>
                                        </div>
                                    </div>

                                    <p class="dark:text-white text-2line font-normal text-[15px] sm:text-sm">
                                        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                                        Mollitia placeat magnam possimus iusto blanditiis pariatur
                                        labore explicabo quo repellat hic dolorum numquam
                                        asperiores, voluptatum fugiat reiciendis aspernatur, non,
                                        odio aperiam voluptas ex tempora vitae. Dolor, consequatur
                                        quidem! Quas magni distinctio dolorum dolore natus, vel
                                        numquam accusamus. Nostrum eligendi recusandae qui tempore
                                        deserunt!
                                    </p>
                                    <div class="pr-3">
                                        <img class="w-full md:h-[450px] h-auto object-cover rounded-xl mt-6"
                                            src="./images/work_images/9.jpg" alt="portfolio image" />
                                    </div>
                                </div>
                                <a href="#close-modal" rel="modal:close"
                                    class="close bg-close-light dark:bg-close-dark">Close</a>
                            </div>
                        </div>
                    </div>

                    <footer class="overflow-hidden rounded-b-2xl bg-[#f8fbfb] dark:bg-[#212425]">
                        <p class="text-center py-6 text-gray-lite dark:text-color-910"> © 2022 All Rights Reserved by <a
                                class="hover:text-[#FA5252] duration-300 transition"
                                href="https://themeforest.net/user/ib-themes" target="_blank"
                                rel="noopener noreferrer">ib-themes</a>.
                        </p>
                    </footer>
                </section>
                <!-- about me section start -->
            </div>
        </div>
    </div>


    <!--=== js ===-->
    <!-- <script src="js/vendor/jquary.min.js"></script> -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="js/vendor/isotope.pkgd.min.js"></script>
    <script src="js/vendor/jquery.modal.min.js"></script>
    <!--=== main js  ===-->
    <script src="./js/main.js"></script>


</body>

</html>